<template>
  <div class="image-item" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @click="selectImage">
    <div class="image-container">
      <img :src="image.url" alt="Image">
      <div class="image-overlay" v-if="isHovered">
        <div class="overlay-content">
          <!-- <span>id:{{ image.id }}</span> -->
          <span>标签：{{ image.name }}</span>
        </div>
      </div>
    </div>
    <div class="image-actions" v-if="isHovered">
      <router-link to="/setwallpaper"><button class="action-button" @click="openDialog">设为壁纸</button></router-link>
      <button class="action-button" @click="toggleFavorite(image, image.isFavorite)">{{ image.isFavorite ? '取消收藏' : '收藏' }}</button>
      <button class="action-button" @click="downloadImage(image,image.url,image.name)">下载</button>
    </div>
  </div>
</template>

<script>
// import Image from './image';
const { ipcRenderer } = require('electron');
export default {
  props: {
    image: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isHovered: false,
      isFavorite: false
    };
  },
  methods: {
    openDialog() {
    // 使用 Electron 的对话框模块打开文件选择对话框
    const { ipcRenderer } = require('electron');
    const { dialog } = require('electron').remote;

    

    // 配置文件选择对话框的选项
    const options = {
      title: '请复制壁纸文件所在路径',
      properties: ['openFile'],
      // filters: [
      //   { name: 'Images', extensions: ['jpg', 'png', 'gif'] }
      // ]
    };

    

    // 打开文件选择对话框
    dialog.showOpenDialog(options).then(result => {
      // 用户选择了文件路径
      // if (!result.canceled && result.filePaths.length > 0) {
        const imagePath = result.filePaths[0];
        console.log('imagePath是这样的',imagePath)
        this.$emit('set-wallpaper', imagePath);
        ipcRenderer.send('set-wallpaper', imagePath);
      // }
    }).catch(err => {
      console.error('打开文件选择对话框出错:', err);
    });
  },

    handleMouseEnter() {
      this.isHovered = true;
    },
    handleMouseLeave() {
      this.isHovered = false;
    },
    selectImage() {
      // 触发图片选择事件，传递选中的图片对象
      this.$emit('image-selected', this.image);
    },
    setAsWallpaper(imageUrl) {

      const imagePath = 'C:/Users/52688/Desktop/5a4bb5fc1dd89d58e012dbafbe05951.jpg'; // 替换为实际的图片路径      
      this.$emit('set-wallpaper', imagePath);
      ipcRenderer.send('set-wallpaper', imagePath);
      //处理设为壁纸操作
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');

      // 创建一个新的图片元素
      const image = new Image();

      // 加载图片
      image.onload = function() {
        // 将图片绘制到 canvas 上
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0);

        // 获取 canvas 的 Data URL
        const dataUrl = canvas.toDataURL('image/png');

        // 使用浏览器提供的 API 将 Data URL 设置为桌面壁纸
        if (typeof navigator !== 'undefined' && navigator.setDesktopWallpaper) {
          navigator.setDesktopWallpaper(dataUrl);
        } else {
          console.error('浏览器不支持设置桌面壁纸。');
        }
        if (image.complete && image.naturalWidth !== 0) {
    // 图像加载成功，执行绘制操作
    // ...
        } else {
          console.error('图像加载失败');
        }
      };

      // 设置图片的源 URL
      image.src = imageUrl;
    },
    downloadImage(image,url, filename) {
      // 处理下载图片操作
    fetch(url)
    .then(response => response.blob())
    .then(blob => {
      // 创建一个下载链接
      const downloadLink = document.createElement('a');
      downloadLink.href = URL.createObjectURL(blob);
      downloadLink.download = filename;

      // 模拟点击下载链接
      downloadLink.click();

      // 释放创建的对象 URL
      URL.revokeObjectURL(downloadLink.href);
    })
    .catch(error => {
      console.error('下载图片出错:', error);
    });
    // const image = new Image(0,url,this.changetagtochina(imageData.wCate),false);
    this.$store.dispatch('addToDownload',image);
    },

    toggleFavorite(image, isFavorite) {
      isFavorite = !isFavorite;

      if (isFavorite) {
        // 使用 dispatch 触发 addToFavorites action
        this.$store.dispatch('addToFavorites', image);
        image.isFavorite = true;
      } else {
        // 使用 dispatch 触发 removeFromFavorites action
        this.$store.dispatch('removeFromFavorites', image);
        image.isFavorite = false;
      }
    }
  }
}

</script>

<style>
.image-item {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
}

.image-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.action-button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.action-button:hover {
  background-color: #23527c;
}
</style>
